
<template>
  <div>
    <SearchForm
        @search="onSearch"
        @reset="onReset"
        :search-list="searchList" :search-params="searchParams">
    </SearchForm>

    <div class="table-layout">
      <el-card shadow="never">
        <div class="table-box">
          <el-table
              size="large"
              stripe
              border
              v-loading="loading"
              max-height="500px"
              :data="tableData"
              row-key="id"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
              @selection-change="onSelect"
          >
            <el-table-column prop="createTime" label="创建时间"  width="160px"/>
            <el-table-column prop="orderNo" label="订单号" width="160px" show-overflow-tooltip/>
            <el-table-column prop="plotName" label="充电站" width="160px"/>
            <el-table-column prop="deviceName" label="充电桩"/>
            <el-table-column prop="portCode" label="充电枪"/>
            <el-table-column prop="status" label="充电时长">
              <template slot-scope="scope">
                {{ formateTime(scope.row.chargedTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="充电度数">
              <template slot-scope="scope">
                {{ scope.row.chargedElectricity || 0 }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="充电费用">
              <template slot-scope="scope">
                {{ scope.row.chargeMoney || 0 }}
              </template>
            </el-table-column>
            <el-table-column prop="nickname" label="用户名"/>
            <el-table-column prop="mobile" label="手机号"/>
            <el-table-column prop="status" label="状态" fixed="right">
              <template slot-scope="scope">
                {{ getStatusText(scope.row.chargeStatus) }}
              </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="100px">
              <template slot-scope="scope">
                <el-button type="text" @click="onView(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

      <div class="page-box">
        <el-pagination
            background
            :current-page="pageNo"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="changePageSize"
            @current-change="changePageNo"
        />
      </div>
    </div>
  </div>
</template>
<script>

import crud from "@/mixins/crud";
import { http } from "@/api";
import Detail from "./detail";
export default {
  name: "index",
  components: {
    Detail
  },
  mixins: [crud],
  data() {
    return {
      request:http.order,
      searchList: [
        {
          label: '地点/充电站',
          prop: 'name',
          name: 'input',
          clearable: true
        },
        {
          label: '订单号',
          prop: 'orderNo',
          name: 'input',
          clearable: true
        },
      ],
      searchParams: {
        name: '',
      },
      defaultParams: {
        chargeStatus: 'CHARGING_COMPLETE',
      },
      tableData: [

      ]
    }
  },
  methods: {
    // 获取订单状态文本
    getStatusText(status) {
      const statusMap = {
        'NOT_CHARGING': '待充电',
        'CHARGING': '充电中',
        'START_FAIL': '充电失败',
        'CHARGING_COMPLETE': '已完成'
      }
      return statusMap[status] || status
    },

    formateTime(minutes) {
      if (!minutes) return 0
      if (minutes < 60) {
        return  minutes + '分钟'
      }

      var hours = Math.floor(minutes / 60);
      var remainingMinutes = minutes % 60;
      return hours + "时" + remainingMinutes + "分";
    },
    onView(row) {
      this.$router.push({
        path: '/order/detail/' + row.orderId
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
